<template>
  <div class="allBox">
    <div class="top">
      <div class="top_svg">
        <img src="../utils/images/logo.png" width="200px" height="140px" />
      </div>
      <div class="top_title">
        <!-- <div class="top_title_item">搜索</div> -->
        <div class="top_title_item" @click="titkitToMinePage">我的</div>
        <div class="top_title_item" @click="titkitToShoppingCarPage">购物车</div>
        <div class="top_title_item" @click="titkitToOrderPage">订单</div>
        <div class="top_title_item" @click="titckToSaleOutPage">售后</div>
        <div class="top_title_item font_css_red">联系我们</div>
      </div>
      <div class="top_user">
        <div class="top_user_welcome">
          <span class="welcome_span">欢迎：</span>
          <span class="welcome_user" style="color: lightpink">{{
            orderListStore.userInfo.userName
          }}</span>
        </div>
        <div class="top_user_logo">
          <el-avatar :size="70" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
        </div>
      </div>
    </div>
    <div class="contentBoxArea">
        <div class="contentIdeaArea">
            <el-card style="max-width: 400px">
                <template #header> "添加客服微信" 或 "关注我们的公众号" 了解更多...</template>
                <img
                src="../utils/images/myWechat.png"
                style="width: 45%;margin-right: 20px;"
                />
                <img
                src="../utils/images/wechatApp.jpg"
                style="width: 45%"
                />
            </el-card>
        </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { useOrderListStore } from '../store/OrderList';

const orderListStore = useOrderListStore();
let router = useRouter();

function titkitToMinePage(){
  //跳转回主页
  router.push('/Shop')
}
function titkitToShoppingCarPage(){
  //跳转至购物车页
  router.push('/shoppingcar')
}
function titkitToOrderPage(){
    //跳转至订单页
    router.push('/order')
}
function titckToSaleOutPage(){
  //跳转售后页面
  router.push('/saleOut')
}
</script>

<style scoped>
.allBox {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  overflow: auto;
  scrollbar-width: none;
}
.allBox::-webkit-scrollbar {
  display: none;
}
.top {
  height: 140px;
  display: flex;
}
.top_svg {
  width: 200px;
}
.top_title {
  width: 70vw;
  display: flex;
  padding: 0 20px;
}
.top_title_item {
  width: 100px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(75, 188, 225);
  font-size: 20px;
  margin: 0 20px;
}
.top_title_item:hover {
  font-size: 25px;
  cursor: pointer;
}
.top_user {
  flex: 1;
  display: flex;
}
.top_user_welcome {
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.welcome_span {
  font-style: oblique;
  font-size: 20px;
}
.top_user_logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.top_user_logo_box {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}
.font_css_red{
  color: red;
}
.contentBoxArea{
    height: 500px;
    position: relative;
}
.contentIdeaArea{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 500px;
    height: 350px;
    transform: translateY(-15%);
}
</style>